<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
    <style>
        h3 a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<h3>
    <a href="">分类管理</a>
</h3>

<div id="app">
<el-button @click="drawer = true" style="margin-left: 0%; width: 20px; margin-top: 10px; margin-bottom: 10px;" icon="el-icon-d-arrow-right">
</el-button>
<el-drawer
        :visible.sync="drawer"
        :direction="direction"
        :modal="false"
        :show-close="false"
        :before-close="handleClose">
    <el-button @click="drawer = false"  style="margin-left: 92%; width: 20px; margin-top: 10px; margin-bottom: 10px;"  icon="el-icon-d-arrow-left">
    </el-button>
    <el-tree :data="data"
             :props="defaultProps"
             @node-click="handleNodeClick">

    </el-tree>
</el-drawer>
    <el-button type="warning" style="position: absolute; left: 620px; top: 230px;" @click="closeForm;dialogFormVisible = true">新增下级分类</el-button>
    <el-button type="danger" style="position: absolute; left: 850px; top: 230px;" @click="remove">删除该分类</el-button>
    <el-card class="box-card" style="width: 450px; margin: 180px auto; border-radius: 15px;box-shadow:0 0 5px 1px #999; ">
    <el-form :model="menu" label-width="80px" >
        <el-form-item label="分类编号:">
            <el-input v-model="menu.mnumber"></el-input>
        </el-form-item>
        <el-form-item label="分类名称:">
            <el-input v-model="menu.mname"></el-input>
        </el-form-item>
        <el-form-item label="添加人:">
            <el-select v-model="menu.userId" placeholder="请选择">
                <el-option
                        v-for="user in users"
                        :key="user.id"
                        :label="user.realname"
                        :value="user.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="分类介绍">
            <el-input type="textarea" v-model="menu.mintroduction"></el-input>
          </el-form-item>
          <el-button type="primary" style="margin-left: 150px" @click="save">更新类信息</el-button>

    </el-form>
    </el-card>

    <el-dialog title="增加下级分类" :visible.sync="dialogFormVisible">
        <el-form :model="menuaa" label-width="80px" >
            <el-form-item label="分类编号:">
                <el-input v-model="menuaa.mnumber"></el-input>
            </el-form-item>
            <el-form-item label="分类名称:">
                <el-input v-model="menuaa.mname"></el-input>
            </el-form-item>
            <el-form-item label="添加人:">
                <el-select v-model="menuaa.userId" placeholder="请选择">
                    <el-option
                            v-for="user in users"
                            :key="user.id"
                            :label="user.realname"
                            :value="user.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="分类介绍">
                <el-input type="textarea" v-model="menuaa.mintroduction"></el-input>
            </el-form-item>
            <el-button type="primary" style="margin-left: 350px" @click="addChild">保存应用</el-button>
        </el-form>
    </el-dialog>
</div>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                drawer: true,
                direction: 'ltr',
                data: [],
                defaultProps: {
                    children: 'menu',
                    label: 'mname'
                },
                menu:{user:{realname:""}},
                menuaa:{},
                users:{},
                dialogFormVisible:false,
                value:null,
                level:null,
            }
        },
        methods: {
            loadTree(){
                axios.get("/menus/tree")
                    .then(res =>{
                        this.data=res.data;
                        console.log(res.data);
                    })
            },
            loadUser(){
                axios.get("/users")
                    .then(res =>{
                        this.users=res.data;
                    })
            },
            handleNodeClick(data,node) {
                console.log(node);
                console.log(data);
                if(data.id!=null){
                    this.menu=data;
                    this.level=node.level;
                }

            },
            handleClose(){
                console.log(11);
                this.drawer=false;
            },
            closeForm(){
                this.menu={user:{realname:""}}
            },
            remove(){
                if(this.menu.user.realname!="") {
                    axios.delete("/menuu/"+this.menu.id)
                        .then(res =>{
                            if (res.data == "ok") {
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                            }
                            this.loadTree();
                            this.loadUser();
                            this.menu={id:0};
                        })
                }else {
                    this.$message.error('请先选择要删除的类');
                }
            },
            addChild(){
                console.log(this.menuaa);
                if(this.menu.id!=0){
                    if(this.menu.user.realname!="") {
                        console.log(this.menu)
                        if (this.level == 3) {
                            axios.post("/menu/pid/" + this.menu.pid, this.menuaa)
                                .then(res => {
                                    if (res.data == "ok") {
                                        this.$message({
                                            message: '添加成功',
                                            type: 'success'
                                        });
                                    }
                                    this.dialogFormVisible = false;
                                    this.loadTree();
                                    this.loadUser();
                                    this.menuaa={};
                                })
                        } else{
                            console.log(222);
                            axios.post("/menu/id/" + this.menu.id, this.menuaa)
                                .then(res => {
                                    if (res.data == "ok") {
                                        this.$message({
                                            message: '添加成功',
                                            type: 'success'
                                        });
                                    }
                                    this.dialogFormVisible = false;
                                    this.loadTree();
                                    this.loadUser();
                                    this.menuaa={};
                                })
                        }
                    } else{
                        this.$message.error('请先选择一个类');
                    }
                }else{
                    this.menuaa={};
                    this.$message.error('请先选择一个类');
                    this.dialogFormVisible=false;
                    this.drawer=true;

                }

            },
            save(){
                console.log(this.menu);
                if(this.menu!=null) {
                    if(this.menu.id!=0){
                        axios.put("/menuu",this.menu)
                            .then(res =>{
                                if (res.data == "ok") {
                                    this.$message({
                                        message: '更新成功',
                                        type: 'success'
                                    });
                                }
                            })
                    }else{
                        this.$message.error('请先选择一个类');
                    }

                }else{
                    this.$message.error('请先选择一个类');
                }

            },
        },
        mounted(){
         this.loadTree();
         this.loadUser();
        }
    })


</script>
</body>
</html>